<template>
	<view class="zg-area">
		<view class="area-3">
			<image src="/pagesShop/static/ob.png" mode=""></image>
			<view class="area3-content" v-if="details.status !== -1">
				<view class="area3-content-left" v-if="details.status === 0">
					<view class="a3l-title">待付款</view>
					<view class="a3l-info">等待买家付款</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 1">
					<view class="a3l-title">待发货</view>
					<view class="a3l-info">等待卖家发货</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 2">
					<view class="a3l-title">待收货</view>
					<view class="a3l-info">等待买家发货</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 3">
					<view class="a3l-title">待评价</view>
					<view class="a3l-info">等待买家评价</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 4">
					<view class="a3l-title">已完成</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 5">
					<view class="a3l-title">无效订单</view>
				</view>
				<view class="area3-content-right">
					<image src="/pagesShop/static/bag1.png" mode="widthFix" v-if="details.status === 0"></image>
					<image src="/pagesShop/static/bag2.png" mode="widthFix" v-if="details.status === 1"></image>
					<image src="/pagesShop/static/bag4.png" mode="widthFix" v-if="details.status === 2"></image>
					<image src="/pagesShop/static/bag3.png" mode="widthFix" v-if="details.status === 3"></image>
					<image src="/pagesShop/static/bag6.png" mode="widthFix" v-if="details.status === 4"></image>
					<image src="/pagesShop/static/bag5.png" mode="widthFix" v-if="details.status === 5"></image>
				</view>
			</view>
		</view>
		<view class="area-1">
			<view class="area-1-left">
				<image src="/pagesShop/static/location.png" mode="widthFix"></image>
				<view class="area-1-left-info">
					<view class="">
						<text>{{details.receiverName || ''}}</text>
						<text>{{details.receiverPhone || ''}}</text>
					</view>
					<view class="">
						<text>{{details.receiverProvince || ''}}{{details.receiverCity || ''}}{{details.receiverArea || ''}}</text>
					</view>
					<view class="">
						<text>{{details.receiverAddress || ''}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="area-1-right">
				<image src="/pagesShop/static/right.png" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="area-2">
			<view class="area-2-card" v-for="(item,index) in details.mallShopOrderVos" :key="index">
				<view class="a2c-title">
					<image class="tp-img28 tp-mr20" v-if="item.scCover" style="border-radius: 4rpx;" src="../static/shop.png" mode="aspectFill"></image>
					<image v-else class="tp-img32" src="../static/shop.png" mode="widthFix"></image>
					<text class="tp-fz28 tp-fc333">{{item.scName || '店铺名称'}}</text>
				</view>
				<view class="a2c-content level_align" v-for="(item1,index1) in item.mallOrderItems" :key="index1">
					<view class="a2c-img">
						<image class="tp-br8" :src="`${shopImgUrl}${item1.productPic}`" mode="aspectFill"></image>
					</view>
					<view class="a2c-info">
						<view class="a2c-info-title">
							{{item1.productName || '商品名称'}}
						</view>
						<view class="a2c-info1">
							<text v-for="(item2,index2) in handleArr1(item1.productAttr)" :key="index2">{{item2.specification}}{{ item2.value }}</text>
						</view>
						<view class="a2c-info2">
							<view class="a2c-info-price">
								<text class="flex align_baseline tp-red tp-fz24 ">￥ <text class="tp-fz36">{{item1.productPrice || 0}}</text></text>
							</view>
							<view class="a2c-info-num">
								<text>x{{item1.productQuantity || 0}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="area-2-row">
				<view class="a2r-left">
					优惠券
				</view>
				<view class="a2r-right" @click="openP2">
					<text>{{details.reduceAmount ? `-￥${details.reduceAmount || 0}` : '未使用'}}</text>
				</view>
			</view>
			<view class="area-2-row">
				<view class="a2r-left">
					运费
				</view>
				<view class="a2r-right">
					<text>{{details.freightAmount || 0}}元</text>
				</view>
			</view>
			<view class="area-2-row">
				<view class="a2r-left">
					合计
				</view>
				<view class="a2r-right">
					<text class="a2r-price">￥{{ total_money || 0}}</text>
				</view>
			</view>
		</view>
		<view class="area-4">
			<view class="tj">
				<view class="tj-title">
					<view class="tt-left">
						<text>订单信息</text>
					</view>
					<view class="tt-right">
					</view>
				</view>
			</view>
			<view class="a4-content">
				<view>订单号：{{ details.orderSn  || '' }}</view>
				<view>下单时间：{{details.submitTime || '' }}</view>
			</view>
		</view>
		<!-- 工具栏-下 -->
		<view class="fixed-tool-bottom" v-if="details.status !== 5">
			<view class="ftb-l">
			</view>
			<view class="ftb-r" v-if="details.status === 0">
				<button plain @click="action1">取消订单</button>
				<button plain class="active" @click="pay">立即支付</button>
			</view>
			<view class="ftb-r" v-if="details.status === 2">
				<button plain class="active" @click="confirmReceive">确认收货</button>
				<button plain @click="servive">联系客服</button>
			</view>
			<view class="ftb-r" v-if="details.status == 1">
				<button plain @click="servive">联系客服</button>
			</view>
			<view class="ftb-r" v-if="details.status === 3">
				<button plain class="active" @click="goRouter2">去评价</button>
			</view>
			<view class="ftb-r" v-if="details.status === 4">
				<button plain @click="action2">删除订单</button>
				<button plain class="active" @click="goRouter3">查看评价</button>
			</view>
		</view>
		<!-- 支付 -->
		<CommonPaySecond ref="commonPay" :price="total_money" :orderInfo="orderInfo"  @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
	</view>
</template>

<script>
	import CommonPaySecond from '../common/common-pay-second.vue'
	
	export default {
		components:{
			CommonPaySecond
		},
		data() {
			return {
				cid: '', // 商品id
				oid: '', // 订单号
				order_id: '', // 订单id
				details: {}, // 商品信息
				shopdetail:{},//店铺详情,里面有电话
			}
		},
		computed:{
			total_money() {
				return this.trunNumber(this.details.payAmount).toFixed(2)
			},
			// 订单信息
			orderInfo() {
				let o = {
					orderNo: this.oid,
					payType:1,
					sourceType:0,
					payPassword:'123456'
				}
				return o
			},
		},
		onLoad(params) {
			console.log(params);
			this.oid = params.oid
			this.order_id = parseInt(params.id) || 0
		},
		onShow() {
			if(this.oid) {
				this.getDetails1()
			}
		},
		onPullDownRefresh() {
			this.getDetails1()
		},
		methods:{
			// 确认收货
			confirmReceive() {
				this.$http.post(this.$api.confirmReceipt + '?id=' + this.details.id).then(res => {
					if (res.code == 200) {
						this.getDetails1()
						uni.showToast({
							title: '确认成功',
							icon: 'none'
						})
					}
				})
			},
			// 余额支付成功
			payMoney(pwd) {
				uni.showToast({
					title: '支付中...',
					icon: 'loading',
					mask: true,
				})
				this.$http.post(this.$api.shop_order_7, {}, {
					params: {
						orderNo: this.oid,
						payType: 0,
						sourceType: 0,
						payPassword: pwd
					}
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							mask: true,
						})
						this.getDetails1()
					} else {
						uni.showToast({
							title: '支付失败',
							icon:'none'
						})
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					mask: true,
				})
				uni.redirectTo({
					url: '../list/shopOrderList'
				});
			},
			// 取消支付
			noPay() {
				uni.showToast({
					title:'取消支付',
					icon:'none'
				})
			},
			// // 订单信息
			// orderInfo() {
			// 	let o = {
			// 		orderNo: this.oid
			// 	}
			// 	return o
			// },
			// 支付订单
			pay() {
				this.$refs.commonPay.show()
			},
			// 根据订单id查询商品详情
			getDetails1() {
				this.$http.post(this.$api.shop_order_5, {}, {
					params: {
						id: this.oid, // 订单号
					}
				}).then(result => {
					uni.stopPullDownRefresh();
					if (result.code === 200) {
						this.details = result.data
						this.details.status = isNaN(parseInt(this.details.status)) ? -1 : parseInt(this.details.status)
						this.getkefuphone()
					} else {
						this.details = {}
					}
				})
			},
			//根据商品详情的shopid查询店铺详情获取客服电话
			getkefuphone(){
				console.log(this.details,'id有吗')
				this.$http.post(this.$api.shop_shop_1 + '?id=' + this.details.mallShopOrderVos[0].shopId).then(res => {
					if(res.code == 200){
						this.shopdetail = res.data
					}
				})
			},
			// 客服
			servive() {
				if(this.shopdetail.scPhone) {
					uni.makePhoneCall({
						phoneNumber: this.shopdetail.scPhone
					})
				} else {
					uni.showToast({
						title:'暂无客服电话',
						icon:'none'
					})
				}
			},
			// 取消订单
			action1() {
				this.$http.post(this.$api.shop_order_3, {}, {
					params: {
						id: this.order_id, // 订单号
					}
				}).then(result => {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
					if (result.code === 200) {
						uni.navigateBack()
					}
				})
			},
			// 删除订单
			action2() {
				this.$http.post(this.$api.shop_order_10, {}, {
					params: {
						id: this.order_id, // 订单id
					}
				}).then(result => {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
					if (result.code === 200) {
						uni.navigateBack()
					}
				})
			},
			openP1() {
				this.$refs.p1.open()
			},
			closeP1() {
				this.$refs.p1.close()
			},
			// 去评价
			goRouter2() {
				const shopInfo = this.details.mallShopOrderVos.length && this.details.mallShopOrderVos[0].mallOrderItems && this.details.mallShopOrderVos[0]
					.mallOrderItems.length && this.details.mallShopOrderVos[0].mallOrderItems[0]
				console.log(shopInfo);
				shopInfo.orderSn = this.details.orderSn
				uni.navigateTo({
					url: '../details/evaluate?pageName=商城&orderNo=' + this.details.orderSn + '&shopInfo=' + JSON.stringify(
						shopInfo)
				})
			},
			// 查看评价
			goRouter3() {
				uni.navigateTo({
					url: '../details/evaluate?pageName=商城&pageType=1&orderNo=' + this.details.orderSn
				});
			},
			handleArr1(str) {
				if(typeof str === 'string' && str !== '') {
					let arr = []
					try {
						arr = JSON.parse(str)
					} catch(e){
						//TODO handle the exception
					}
					return arr
				} else {
					return []
				}
			},
			// handleData1(item1) {
			// 	const price = parseInt(item1.productPrice)
			// 	const num = parseInt(item1.productQuantity)
			// 	if(!isNaN(price) && !isNaN(num)) {
			// 		return price * num
			// 	} else {
			// 		return 0
			// 	}
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.area-3 {
		height: 180rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;
	}
	
	.area3-content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		padding: 0 60rpx;
	}
	
	.a3l-title {
		font-size: 32rpx;
		margin-bottom: 16rpx;
	}
	
	.a3l-info {
		font-size: 26rpx;
	}
	
	.area3-content-right {
		image {
			width: 100rpx;
			height: auto;
		}
	}
	
	.pay-content {
		background-color: #fff;
		border-radius: 10rpx;
		width: 660rpx;
	}
	
	.pay-title {
		padding: 20rpx;
		border-bottom: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		view {
			flex-shrink: 0;
			width: 40rpx;
		}
		
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.pay-row1 {
		text-align: center;
		color: $uni-color-error;
		font-size: 50rpx;
		padding: 50rpx;
	}
	
	.pay-row2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		margin: 0 30rpx;
		border-bottom: 1px solid #eee;
	}
	
	.pr2-left {
		display: flex;
		align-items: center;
		
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}
	
	.pr2-right {
		display: flex;
		align-items: center;
		
		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
	}
	
	.pay-row3 {
		padding: 60rpx 30rpx;
		
		button {
			background-color: $blue;
			color: #fff;
			border-radius: 10rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}
	}
	
	.area-1 {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.area-1-left {
		display: flex;
		align-items: center;
		color: #666;
		
		image {
			width: 40rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}
	
	.area-1-left-info {
		view {
			margin-bottom: 10rpx;
			color: #666;
			
			&:nth-of-type(1) {
				font-size: 26rpx;
				
				text {
					margin-right: 20rpx;
				}
			}
			
			&:nth-last-of-type(1) {
				margin-bottom: 0
			}
		}
	}
	
	.area-1-right {
		width: 50rpx;
		display: flex;
		justify-content: flex-end;
		
		image {
			width: 14rpx;
			height: auto;
		}
	}
	
	.area-2 {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
	}
	
	.area-2-card {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		
		&:not(:nth-of-type(1)) {
			padding-top: 20rpx;
		}
	}
	
	.a2c-title {
		display: flex;
		align-items: center;
		color: #666;
		margin-bottom: 30rpx;
	}
	
	.a2c-content {
		display: flex;
	}
	
	.a2c-img {
		flex-shrink: 0;
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
		
		image {
			width: 140rpx;
			height: 140rpx;
		}
	}
	
	.a2c-info {
		flex-grow: 1;
	}
	
	.a2c-info-title {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.a2c-info1 {
		margin-bottom: 10rpx;
		color: #999;
		
		text {
			margin-right: 10rpx;
		}
	}
	
	.a2c-info2 {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.a2c-info-price {
		color: $uni-color-error;
		font-weight: bold;
		font-size: 30rpx;
	}
	
	.area-2-row {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		align-items: center;
		padding: 20rpx 0 0;
	}
	
	.a2r-left {
	}
	
	.a2r-right {
		display: flex;
		align-items: center;
		
		image {
			width: 14rpx;
			height: auto;
			margin-left: 20rpx;
		}
	}
	
	.a2r-tip {
		color: #999;
	}
	
	.a2r-price {
		color: $uni-color-error;
	}
	
	.fixed-tool-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}
	
	.ftb-l {
		display: flex;
		align-items: center;
	
		text {
			&:nth-of-type(1) {
				font-size: 26rpx;
			}
		}
	}
	
	.ftb-price {
		color: $uni-color-error;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.ftb-r {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	
		button {
			background-color: transparent;
			color: #999;
			border: 1px solid #ddd;
			font-size: 26rpx;
			padding: 20rpx 30rpx;
			border-radius: 8rpx;
			
			&:not(:nth-of-type(1)) {
				margin-left: 20rpx;
			}
			
			&.active {
				background-color: $tc;
				border: 0;
				color: #fff;
			}
		}
	}
	
	.tj {
		background-color: #fff;
		padding: 30rpx;
	}
	
	.tj-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.tt-left {
		display: flex;
		align-items: center;
		font-size: 30rpx;
	
		&::before {
			content: "";
			display: block;
			width: 6rpx;
			height: 30rpx;
			background-color: $tc;
			margin-right: 20rpx;
		}
	}
	
	.tt-right {
		display: flex;
		align-items: center;
	
		image {
			width: 10rpx;
			height: auto;
			margin-left: 20rpx;
		}
	
		text {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.area-4 {
		margin: 30rpx;
		border-radius: 10rpx;
	}
	
	.a4-content {
		background-color: #fff;
		color: #666;
		padding: 0 30rpx 30rpx;
		
		view {
			margin-bottom: 10rpx;
			
			&:nth-last-of-type(1) {
				margin-bottom: 0;
			}
		}
	}
	
	.sp-a2-title {
		text-align: center;
		font-size: 30rpx;
		padding: 10rpx;
	}
	
	.sp-a2-content {
		padding: 10rpx 0;
	}
	
	.sp-a2-row {
		display: flex;
		align-items: center;
	
		&:not(:nth-last-of-type(1)) {
			margin-bottom: 20rpx;
		}
	}
	
	.sp-a2-left {
		width: 200rpx;
		height: 190rpx;
		margin-right: 30rpx;
		background-color: #ff660a;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.sp-a2-price {
		margin-bottom: 20rpx;
	
		text {
			&:nth-of-type(1) {
				font-size: 32rpx;
			}
	
			&:nth-of-type(2) {
				font-size: 50rpx;
			}
		}
	}
	
	.sp-a2-type {
		font-size: 24rpx;
	
		text {
			display: block;
			padding: 8rpx 30rpx;
		}
	
		view {
			border: 1px solid #fff;
			padding: 8rpx 20rpx;
			border-radius: 40rpx;
			box-sizing: border-box;
		}
	}
	
	.sp-a2-right {}
	
	.sp-a2-info1 {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	
	.sp-a2-info2 {
		font-size: 24rpx;
		color: #666;
	}
	
	.sp-a-4 {
		padding: 30rpx;
	
		button {
			background-color: $uni-color-error;
			color: #fff;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 44px;
		}
	}
	
	.sp-a {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20px 20px 0px 0px;
		position: relative;
	}
	
	.sp-a-close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}
	
	.sp-a-1 {
		display: flex;
		justify-content: space-between;
	}
	
	.spa1-left {
		display: flex;
		align-items: center;
	}
	
	.spa1-right {
		display: flex;
		align-items: flex-start;
	
		image {
			width: 36rpx;
			height: 36rpx;
		}
	}
	
	.spa1-img {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
	
		image {
			width: 100%;
			height: auto;
		}
	}
	
	.spa1-content {}
	
	.sp-a-2 {
		border-bottom: 1px solid #ebebeb;
	}
	
	.spa2-title {
		font-size: 28rpx;
		margin: 30rpx 0;
		display: flex;
		justify-content: space-between;
	}
	
	.spa2-jbq {
		display: flex;
	
		image {
			width: auto;
			height: 40rpx;
		}
	
		input {
			text-align: center;
			width: 40rpx;
			height: 40rpx;
			background-color: #ebebeb;
			min-height: auto;
			font-size: 24rpx;
		}
	}
	
	.spa2-content {
		display: flex;
		flex-wrap: wrap;
	}
	
	.spa2-tag {
		font-size: 28rpx;
		padding: 6rpx 20rpx;
		background-color: #ebebeb;
		border-radius: 10rpx;
		margin: 0 20rpx 20rpx 0;
	
		&.active {
			background-color: #ffe8e6;
			border: 1px solid $uni-color-error;
			color: $uni-color-error;
		}
	}
	
	.spa1-price {
		text {
			&:nth-of-type(1) {
				font-size: 36rpx;
				color: $uni-color-error;
				font-weight: bold;
			}
	
			&:nth-of-type(2) {
				margin-left: 20rpx;
				font-size: 24rpx;
				text-decoration: line-through;
				color: #999;
			}
		}
	}
	
	.spa1-info {
		font-size: 24rpx;
		color: #999;
		margin: 10rpx 0;
	}
	
	.spa1-text {
		text {
			margin-right: 10rpx;
		}
	}
</style>
